<template>
  <div class="max-w-5xl mx-auto px-4 mb-8">
    <div class="flex items-center justify-center mb-6">
      <div class="w-16 h-px bg-ink/20"></div>
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-kai mx-4 text-ink">作品详情</h2>
      <div class="w-16 h-px bg-ink/20"></div>
    </div>

    <div
      class="bg-white/70 rounded-sm shadow-md overflow-hidden mb-6 transform transition-all duration-300 hover:shadow-lg relative"
    >
      <div class="flex flex-col md:flex-row">
        <!-- 作品图片 -->
        <div class="w-full md:w-1/2 p-6">
          <div class="bg-paper rounded-sm overflow-hidden">
            <img
              :src="workImage"
              :alt="workTitle"
              class="w-full h-auto object-contain"
            />
          </div>
        </div>

        <!-- 作品信息 -->
        <div class="w-full md:w-1/2 p-6 flex flex-col justify-center">
          <h3 class="font-kai text-2xl font-bold mb-2 text-ink">{{ workTitle }}</h3>
          <p class="font-kai text-lg text-gray-700 mb-4">作者：{{ author }}</p>

          <div class="mb-4">
            <span
              class="inline-block bg-lightgold text-[#9E2A2B] px-3 py-1 rounded-sm text-sm font-kai"
            >
              {{ category }}
            </span>
          </div>

          <div class="text-gray-600 font-kai leading-relaxed text-[clamp(0.9rem,2vw,1rem)]">
            <p class="mb-2">创作时间：{{ createTime }}</p>
            <p>获奖等级：{{ awardLevel }}</p>
          </div>
        </div>
      </div>

      <!-- 分享按钮 -->
      <button
        @click="$emit('share')"
        class="absolute bottom-4 right-4 bg-[#D4AF37] text-white px-3 py-1 rounded-full text-sm flex items-center gap-1 z-10 transform transition-all duration-300 hover:bg-[#B8941F] hover:scale-105"
      >
        <i class="fa fa-share"></i>
        分享
      </button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  workImage: {
    type: String,
    default: 'src/assets/images/shufa_01.jpg'
  },
  workTitle: {
    type: String,
    default: '沁园春雪选段'
  },
  author: {
    type: String,
    default: '胡浩'
  },
  category: {
    type: String,
    default: '书法作品'
  },
  createTime: {
    type: String,
    default: '2024年12月'
  },
  awardLevel: {
    type: String,
    default: '特等奖'
  }
});

defineEmits(['share']);
</script>

<style scoped>
.bg-paper {
  background-color: #f5f5dc;
}

.bg-lightgold {
  background-color: #f0e68c;
}

.text-ink {
  color: #2c2c2c;
}
</style>